<template>
 <!-- 查找一个学生各考试（课程）的成绩 -->
  <div class="app-container">
    <div class="container">
    <div class="table">
      <el-form :model="params" ref="queryRef" label-width="68px" style="display: flex; flex-wrap: wrap;" >
      <el-form-item label="学生编号" prop="examCode"  style="width: 45%;">
        <el-input
          v-model="params.studentId"
          placeholder="请输入学生编号"
          clearable
          @keyup.enter="getList"
        />
      </el-form-item>
      <el-form-item label="学生姓名" prop="subject" style="width: 47%;margin-left: 20px;">
        <el-input
          v-model="params.studentName"
          placeholder="请输入姓名名称"
          clearable
          @keyup.enter="getList"
        />
      </el-form-item>
      <el-form-item style="margin-left: -70px;">
        <el-button type="primary" icon="Search" @click="getList">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="studentList" >
      <el-table-column label="学生编号" align="center" prop="studentId" />
      <el-table-column label="学生姓名" align="center" prop="studentName" />
      <el-table-column label="课程平均分" align="center" prop="averageScore" />
      <el-table-column label="操作" align="center"  class-name="small-padding fixed-width" >
        <template #default="scope">
          <el-button class="table-button" link type="primary" icon="info" @click="display(scope.row)" v-hasPermi="['module:score:edit']">图形展示</el-button>
        </template>
      </el-table-column>
    </el-table>
      <pagination
      v-show="total>0"
      :total="total"
      v-model:page="params.pageNum"
      v-model:limit="params.pageSize"
      @pagination="getList"
    />
    </div>
     <!-- 右边为e-charts图形展示 -->
    <div class="box" ref="box">图片加载中。。。</div>
  </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { listStudentExam,studentExamScore } from "@/api/module/score"

// 响应式数据
const isNull = ref(false)
const loading=ref(false)
const total = ref(0)
const box = ref(null)
const tableDataX = ref([])
const tableDataY = ref([])
const studentNam=ref('')

const params=ref({
  pageNum:1,
  pageSize:10,
  studentId:'',
  studentName:'',
})

//某学生各考试（课程）成绩列表
const scorelist=ref([])
//学生列表
const studentList=ref([])
//获取学生列表
const getList=()=>{
  return listStudentExam(params.value).then(res=>{
    studentList.value=res.rows
    total.value=res.total
  })
}

//重置按钮
const resetQuery = () => {
  params.value = {
  pageNum:1,
  pageSize:10,
  studentId:'',
  studentName:'',
  }
  getList()
}

//获取考试分段数据
const display=async (row)=>{
  //传入examCode和sourse
  //获取学生成绩列表
  //赋值给scorelist
   await studentExamScore({studentId:row.studentId}).then(res=>{
    scorelist.value=res.data
      studentNam.value=res.data[0].studentName||'xxx'
  })

  //重置
  tableDataX.value=[]
  tableDataY.value=[]

  score()

}
//生成图形
const score = () => {
  try{
  if(scorelist.value.length>0) { 
      const rootData = scorelist.value
      //遍历变成x数组和y数组
      rootData.forEach((element) => {
        tableDataX.value.push(element.subject||element.examName)
        tableDataY.value.push(element.etScore)
      })

      const boxDom = box.value
      const scoreCharts = echarts.init(boxDom)
      const option = {
         grid: {
          top: '25%', // 调整这个值，例如从默认的 "10%" 改为 "25%"
          bottom: '10%',
          left: '8%',
          right: '8%'
        },
        title: {
          text: `${studentNam.value} 成绩柱状图`,         // 主标题
          subtext: '分数范围：0 - 100',     // 副标题
          left: 'center',   
          // top: '-20'   
          left: '10%'      ,       // 标题居中
              textStyle: {
                fontSize: 25,     // 字体大小
                fontWeight: 'bold', // 字体加粗
                // color: '#333'     // 字体颜色
          }
         },
        xAxis: {
          type: 'category',
          data: tableDataX.value
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: tableDataY.value,
            type: 'bar',//柱状图
            itemStyle: {color:'#5470c6'},
            label: { show: true, position: 'top' }, // 显示数据标签，位置在顶部

          }
        ]
      }

      scoreCharts.setOption(option)
      scoreCharts.on('mouseover', params => {
        console.log(params.value)
      })

    }else { 
      isNull.value = true
      }
    }catch(error) {
      console.log(error)
    }
   
  
}

// 生命周期钩子
onMounted(() => {
  nextTick( () => {
     getList().then(()=>{
      if (studentList.value.length > 0) {
      display(studentList.value[0])
    }
    })   
  })
})


</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction:row ;
}
.table {
  width:40%;
  height: 500px;
  border-right: 1px solid gray; /* 设置左边灰色边框 */
  padding-right: 30px;
  // background-color: red;
}
.box{
  width:60%;
  margin-left: 20px;
    justify-content: center; // 水平居中
  align-items: center;     // 垂直居中
}

.query-form {
 display: flex;
}


</style>
